<!--图层-光标-->
<template>
  <g class="CursorLayer" v-if="isShowCursor" :style="{ transform: 'scale(' + canvasScale + ')' }">
    <!-- 十字光标 ;10 选择;20 绘图;40 移动;50 复制-->
    <g v-if="canvasStore.workState === 10 ||
      canvasStore.workState === 20 ||
      canvasStore.workState === 40 ||
      canvasStore.workState === 50 ||
      canvasStore.workState === 70
      ">
      <!-- 光标_水平线 -->
      <line :x1="coordinate.x - cursorLang" :y1="coordinate.y" :x2="coordinate.x + cursorLang" :y2="coordinate.y"
        :stroke="cursorColor" :stroke-width=cursorLineWidth />
      <!-- 光标_垂直线 -->
      <line :x1="coordinate.x" :y1="coordinate.y - cursorLang" :x2="coordinate.x" :y2="coordinate.y + cursorLang"
        :stroke="cursorColor" :stroke-width=cursorLineWidth />
    </g>
    <!-- 框光标 -30 编辑-->
    <g v-if="canvasStore.workState === 30">
      <!-- 光标中心_矩形 -->
      <!-- <rect :width="cursorBoxSize + 'px'" :height="cursorBoxSize + 'px'" :x="coordinate.x - cursorBoxSize / 2"
          :y="coordinate.y - cursorBoxSize / 2" :stroke="cursorColor" fill="rgba(255, 255, 255, 0)" stroke-width='1' /> -->
    </g>
    <!--十字+框光标-->
    <g v-if="canvasStore.workState === 0">
      <!-- 水平线_左边 -->
      <line :x1="coordinate.x - cursorBoxSize / 2" :y1="coordinate.y" :x2="coordinate.x - cursorLang" :y2="coordinate.y"
        :stroke="cursorColor" :stroke-width=cursorLineWidth />
      <!-- 水平线_右边 -->
      <line :x1="coordinate.x + cursorBoxSize / 2" :y1="coordinate.y" :x2="coordinate.x + cursorLang" :y2="coordinate.y"
        :stroke="cursorColor" :stroke-width=cursorLineWidth />
      <!-- 垂直线_上边 -->
      <line :x1="coordinate.x" :y1="coordinate.y - cursorBoxSize / 2" :x2="coordinate.x" :y2="coordinate.y - cursorLang"
        :stroke="cursorColor" :stroke-width=cursorLineWidth />
      <!-- 垂直线_下边 -->
      <line :x1="coordinate.x" :y1="coordinate.y + cursorBoxSize / 2" :x2="coordinate.x" :y2="coordinate.y + cursorLang"
        :stroke="cursorColor" :stroke-width=cursorLineWidth />
      <!-- 光标中心_矩形 -->
      <rect :width="cursorBoxSize + 'px'" :height="cursorBoxSize + 'px'" :x="coordinate.x - cursorBoxSize / 2"
        :y="coordinate.y - cursorBoxSize / 2" :stroke="cursorColor" fill="rgba(255, 255, 255, 0)"
        :stroke-width=cursorLineWidth />
    </g>
  </g>
</template>

<script setup lang="ts">
/* ================================================================================================ */
// 🍀引入
/* ================================================================================================ */
import { ref, reactive, onMounted, toRefs, watch, onUnmounted, computed } from "vue";
/**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
// 🐸 图元端函数引入
/**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
import { } from "@/functions";

/**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
// 🐸 引入存储
/**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
import { useCanvasStore } from "@/store/canvasStore"; // 画布

/**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
// 🐸 使用存储
/**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
const canvasStore = useCanvasStore(); // 画布

/* ================================================================================================ */
//                                变量
/* ================================================================================================ */
/** 画布缩放 */
let canvasScale = computed(() => canvasStore.canvasAttr.canvasScale);
/** 显示光标 */
let isShowCursor = computed(() => canvasStore.canvasAttr.isShowCursor);
/** 光标颜色 */
let cursorColor = computed(() => canvasStore.canvasAttr.cursorColor);
/** 光标盒尺寸 */
let cursorBoxSize = computed(() => canvasStore.canvasAttr.cursorBoxSize);
/** 光标线宽度 */
let cursorLineWidth = computed(() => canvasStore.canvasAttr.cursorLineWidth);
/** 光标长度 */
let cursorLang = computed(() => canvasStore.canvasAttr.cursorLang);
/** 真实坐标 */
let coordinate = computed(() => canvasStore.coordinate);
</script>

<style lang="scss" scoped>
/* 引入共用css */
@import "@/assets/h.scss";
</style>
